<template>
	<view class="delivery-container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="status-item" :class="{active: currentTab === 'available'}" @click="switchTab('available')">
				新订单({{newOrdersList.length}})
			</view>
			<view class="status-item" :class="{active: currentTab === 'accepted'}" @click="switchTab('accepted')">
				已接订单({{orderReadyList.length}})
			</view>
		</view>

		<!-- 可接单订单列表 -->
		<scroll-view class="order-list" scroll-y>
			<view v-if="currentTab === 'available'">
				<view v-for="order in newOrdersList" :key="order.id" class="order-card">
					<view class="order-header">
						<text class="order-id">订单号: {{order.orderNo}}</text>
						<text class="order-time">{{order.createTime}}</text>
					</view>
					<view class="order-info">
						<view class="info-item">
							<text class="label">收货人:</text>
							<text class="value">{{order.receiverName}}</text>
						</view>
						<view class="info-item">
							<text class="label">收货电话:</text>
							<text class="value">{{order.receiverPhone}}</text>
							<view class="orderItem-3" @click="copyText(orderDetail.receiverPhone)">复制</view>
						</view>
						<view class="info-item">
							<text class="label">送餐点:</text>
							<text class="value">{{order.receiverAddress}}</text>
						</view>
						<view class="info-item">
							<text class="label">送达时间:</text>
							<text class="value">{{order.estimatedDeliveryTime}}</text>
						</view>
						<view class="info-item">
							<text class="label">备注:</text>
							<text class="value">{{order.remark ||""}}</text>
						</view>
					</view>
					<view class="info-item">
						<view class="bg-white margin-xs padding-xs shadow radius text-content"
							v-for="(item,index) in order.detailsList" :key="index">
							<view class="flex padding-top-sm solids-top">
								<image :src="imagePrefix + item.dishImage" style="width: 100rpx;height: 90rpx;;"
									mode="aspectFill" class="shadow cover radius solids"></image>
								<view class="flex text-content padding-left justify-between" style="flex-grow: 1;">
									<view>{{ item.dishName }}</view>
									<view style="font-size: 32rpx; font-weight: 600;">
										<view class="text-grey text-center">×{{item.quantity}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<button class="accept-btn" @click="acceptOrder(order.id)">接单</button>
				</view>
			</view>

			<view v-else>
				<view v-for="order in orderReadyList" :key="order.id" class="order-card">
					<view class="order-header">
						<text class="order-id">订单号: {{order.orderNo}}</text>
						<text class="order-status">{{getStatusText(order.orderStatus)}}</text>
					</view>
					<view class="order-info">
						<view class="info-item">
							<text class="label">收货人:</text>
							<text class="value">{{order.receiverName}}</text>
						</view>
						<view class="info-item">
							<text class="label">收货电话:</text>
							<text class="value">{{order.receiverPhone}}</text>
						</view>
						<view class="info-item">
							<text class="label">送餐点:</text>
							<text class="value">{{order.receiverAddress}}</text>
						</view>
						<view class="info-item">
							<text class="label">预达时间</text>
							<text class="value">{{order.estimatedDeliveryTime}}</text>
						</view>
						<view class="info-item">
							<text class="label">配送费:</text>
							<text class="value price">¥{{order.freightAmount}}</text>
						</view>
						<view class="info-item">
							<text class="label">备注:</text>
							<text class="value">{{order.remark ||""}}</text>
						</view>
					</view>
					<button class="accept-btn" @click="detailOrder(order.id)">订单详情</button>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航 -->
		<view class="tab-bar">
			<view class="tab-item active">
				<uni-icons type="cart" size="24"></uni-icons>
				<text>接单</text>
			</view>
			<view class="tab-item" @click="navigateToStats">
				<uni-icons type="stats" size="24"></uni-icons>
				<text>统计</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listOrders,
		orderReady,
		receiveOrder
	} from '@/api/system/orders.js'

	export default {
		data() {
			return {
				newOrdersList: [],
				orderReadyList: [],
				currentTab: 'available',

			}
		},
		onShow() {
			this.getNewOrdersList()
			this.getOrderReadyList()
		},

		methods: {
			getNewOrdersList() {
				listOrders().then(res => {
					console.log("res:", res.data);
					this.newOrdersList = res.data
				})
			},
			getOrderReadyList() {
				orderReady().then(res => {
					console.log("orderReady", res);
					this.orderReadyList = res.data
				})
			},

			// 切换
			switchTab(tab) {
				this.currentTab = tab
				if (tab === 'available') { // 当上面传available过来时需要调用可以接单列表查询的方法
					this.getNewOrdersList()
				} else {
					// 否则调用已经接单的方法
					this.getOrderReadyList()
				}
			},
            //接单
			acceptOrder(id) {
				console.log("orderId", id);
				// 1. 先弹出确认框""
				this.$modal.confirm("是否确认接单？").then(() => {
					// 2. 用户确认后，调用接口
					receiveOrder(id).then(res => {
						console.log('接单成功:', res);
						this.$modal.msgSuccess("接单成功");
						// 3. 刷新订单列表
						this.getNewOrdersList();
						this.getOrderReadyList()
					})
				}).catch(err => {
					// 4. 处理错误（包括用户取消确认和接口错误）
					if (err !== 'acceptOrder') { // 排除用户手动取消的情况
						console.error('接订单失败:', err);
						this.$modal.msgError("接单单失败，请重试");
					}
				});
				
			},
			//食堂出餐查看详情
			detailOrder(orderId){
				this.$tab.navigateTo('/pages/mine/pendingOrders/detail?orderId=' + orderId + '&readonly=true');
			},

			getStatusText(status) {
				console.log(status);
				const statusMap = {
					'2': '待出餐'
				}
				return statusMap[status] || status
			},
			navigateToStats() {
				uni.showToast({
					title: '未开发统计页面',
					icon: 'none'
				})
				// 实际开发中取消注释
				// uni.navigateTo({
				//   url: '/pages/stats/index'
				// })
			},
			// 复制文本
			copyText(msg) {
				uni.setClipboardData({
					data: msg,
					success: () => Alert.success('复制成功'),
					fail: () => Alert.error('复制失败')
				});
			},
		}
	}
</script>

<style lang="scss">
	.delivery-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.status-bar {
		display: flex;
		background-color: #fff;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;

		.status-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #666;

			&.active {
				color: #07c160;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 80rpx;
					height: 6rpx;
					background-color: #07c160;
					border-radius: 3rpx;
				}
			}
		}
	}

	.order-list {
		flex: 1;
		padding: 20rpx;
	}

	.order-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

		.order-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #999;
		}

		.order-info {
			margin-bottom: 20rpx;

			.info-item {
				display: flex;
				margin-bottom: 10rpx;
				font-size: 26rpx;

				.label {
					color: #666;
					width: 120rpx;
				}

				.value {
					flex: 1;
					color: #333;
				}

				.price {
					color: #ff5f15;
					font-weight: bold;
				}
			}
		}

		.accept-btn {
			background-color: #07c160;
			color: #fff;
			border-radius: 40rpx;
			font-size: 28rpx;
			height: 70rpx;
			line-height: 70rpx;

			&:active {
				opacity: 0.8;
			}
		}

	}

	.tab-bar {
		display: flex;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		padding: 10rpx 0;

		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 20rpx;
			color: #666;

			&.active {
				color: #07c160;
			}

			.uni-icons {
				display: block;
				margin: 0 auto 5rpx;
			}
		}
	}
</style>